<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {RequestPath, startRequest, CategroyResponseData, CategoryItemData} from '../base/RequestWork'
import { ElMessage } from 'element-plus';
// 列表绑定的类别数据
let tableData = ref()
// 控制编辑面板是否可见
let dialogVisible = ref(false)
// 当前编辑的类别数据
let currentSelectedCategory = ref()
// 所提供选择的排序权重
const sortMenu = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
// 当前类别编辑对话框的模式 0为新建 1为编辑
let mode = ref(0)
// 组件挂载时的生命周期函数，进行数据加载
onMounted(()=>{
    reloadData()
}) 
// 加载数据的方法
function reloadData() {
    // 请求所有类别数据
    startRequest(RequestPath.goodsCategoryGet, 'get', {}).then((response)=>{
        let data = response.data as CategroyResponseData
        tableData.value = data.datas ?? []
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}
// 新增类别
function addCategory() {
    mode.value = 0
    dialogVisible.value = true
    currentSelectedCategory.value = {}
}

// 更新类别信息
function updateCategory(ca: CategoryItemData) {
    mode.value = 1
    dialogVisible.value = true
    currentSelectedCategory.value = {...ca}
}
// 点击编辑面板确认按钮执行的方法
function confirmAction() {
    if (!currentSelectedCategory.value.name || !currentSelectedCategory.value.description) {
        ElMessage.error({
            message: "请完善参数"
        })
        return
    }
    if (mode.value == 0) {
        // 新增
        startRequest(RequestPath.goodsCategoryAdd, "post", currentSelectedCategory.value).then(()=>{
            dialogVisible.value = false
            // 刷新页面
            reloadData()
        }).catch((error)=>{
            ElMessage.error({
                message: error.response.data.error
            })
        })
    } else {
        // 更新
        startRequest(RequestPath.goodsCategoryUpdate, "post", currentSelectedCategory.value).then(()=>{
            dialogVisible.value = false
            // 刷新页面
            reloadData()
        }).catch((error)=>{
            ElMessage.error({
                message: error.response.data.error
            })
        })
    }
}
</script>

<template>
    <!-- 内容区 -->
    <div class="contentContainer">
        <el-button type="primary" style="margin-bottom: 10px;" @click="addCategory">新增</el-button>
        <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID"  width="80"/>
        <el-table-column prop="name" label="类别名称" width="180" />
        <el-table-column prop="description" label="描述" width="240"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="280"></el-table-column>
        <el-table-column prop="sort" label="排序权重" width="180"></el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="primary" @click="updateCategory(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
        </el-table>
    </div>
    <!-- 编辑面板 -->
    <el-dialog
        v-model="dialogVisible"
        :title="mode == 0 ? '新建类别' : '修改类别'"
        width="30%">
        <div style="font-size: 18px; margin-bottom: 10px;" v-show="mode == 1">
            <span style="width: 45px; display: inline-block;">id:</span><el-input style="width: 300px; margin-left: 10px;" disabled v-model="currentSelectedCategory.id" />
        </div>
        <div style="font-size: 18px; margin-bottom: 10px;">
            <span style="width: 45px; display: inline-block;">名称:</span><el-input style="width: 300px; margin-left: 10px;" v-model="currentSelectedCategory.name" />
        </div>
        <div style="font-size: 18px; margin-bottom: 10px;">
            <span style="width: 45px; display: inline-block;">描述:</span><el-input style="width: 300px; margin-left: 10px;" v-model="currentSelectedCategory.description" />
        </div>
        <div style="font-size: 18px; margin-bottom: 10px;">
            <span style="width: 45px; display: inline-block;">排序:</span>
            <el-select v-model="currentSelectedCategory.sort"  style="width: 300px; margin-left: 10px;" placeholder="选择权重">
                <el-option v-for="it in sortMenu" :label="it" :value="it" :index="it" />
            </el-select>
        </div>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmAction">
            确认
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>